<script lang="ts">
  import Pagination from "../components/Pagination.svelte";
  import DialogDetail from "../components/DialogDetail.svelte";
  import { fade, scale } from "svelte/transition";
  // import { createEventDispatcher } from "svelte";

  // const dispatch = createEventDispatcher();

  let showDialog = false;
  // 模拟数据
  const services = [
    {
      serviceName: "理发",
      userName: "姜鸿树",
      phone: "187****9392",
      address: "成都市温江区政和街666号1栋1单元25楼4号",
      time: "2024.10.09 09:00-11:00",
      status: "待接单",
    },
    {
      serviceName: "理发",
      userName: "姜鸿树",
      phone: "187****9392",
      address: "成都市温江区政和街666号1栋1单元25楼4号",
      time: "2024.10.09 09:00-11:00",
      status: "待接单",
    },
    // ... 更多数据
  ];

  const handleClick = (service: Service) => {
    console.log(service);
    showDialog = true;
  };
</script>

<div
  class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 dialog"
>
  <div
    class="bg-[rgba(4,11,29,0.8)] text-white rounded-lg w-full max-w-6xl border-2 px-8 py-4 border-[#20497F]"
  >
    <!-- 标题栏 -->
    <div
      class="flex pb-4 justify-between items-center border-b border-[#20497F]"
    >
      <div class="flex items-center gap-2">
        <img src="dp/zhuangshi.png" alt="服务列表" class="w-4 h-4" />
        <h2 class="text-lg">{showDialog ? "服务详情" : "服务列表"}</h2>
      </div>
      <div class="flex justify-end items-center gap-2">
        {#if showDialog}
          <button
            class="px-3 py-1 mr-4 border border-gray-700 rounded-r hover:bg-gray-700 flex items-center gap-2"
            on:click={() => (showDialog = false)}
          >
            返回
          </button>
        {/if}
        <button class="text-gray-400 hover:text-white">✕</button>
      </div>
    </div>
    {#if showDialog}
      <div
        class="w-full"
        in:scale={{ duration: 200, start: 0.98, opacity: 0 }}

      >
        <DialogDetail on:close={() => showDialog = false} />
      </div>
    {:else}
      <!-- 搜索栏 -->
      <div class="p-4 flex gap-4">
        <input
          type="text"
          placeholder="请输入用户名称搜索"
          class="bg-transparent border border-[#20497F] rounded px-3 py-2 w-64 text-sm"
        />
        <select
          class="bg-transparent border border-[#20497F] rounded px-3 py-2 w-48 text-sm"
        >
          <option>全部服务名称</option>
        </select>
        <select
          class="bg-transparent border border-[#20497F] rounded px-3 py-2 w-48 text-sm"
        >
          <option>全部服务状态</option>
        </select>
        <button
          class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded text-sm flex items-center gap-2"
        >
          <span>🔍</span> 查询
        </button>
        <button
          class="border border-blue-500 text-blue-500 hover:bg-blue-500/10 px-4 py-2 rounded text-sm flex items-center gap-2"
        >
          <span>↻</span> 重置
        </button>
      </div>

      <!-- 表格 -->
      <div class="p-4">
        <table class="w-full">
          <thead class="thead">
            <tr class="text-left text-[#fff] text-[12px]">
              <th class="py-2 px-4">服务名称</th>
              <th class="py-2 px-4">用户名称</th>
              <th class="py-2 px-4">用户电话</th>
              <th class="py-2 px-4">服务地址</th>
              <th class="py-2 px-4">预约时间</th>
              <th class="py-2 px-4">服务状态</th>
            </tr>
          </thead>
          <tbody>
            {#each services as service}
              <tr
                class="table-tr cursor-pointer"
                on:click={() => handleClick(service)}
              >
                <td class="py-3 px-4">{service.serviceName}</td>
                <td class="py-3 px-4">{service.userName}</td>
                <td class="py-3 px-4">{service.phone}</td>
                <td class="py-3 px-4">{service.address}</td>
                <td class="py-3 px-4">{service.time}</td>
                <td class="py-3 px-4">
                  <span
                    class={service.status === "待接单"
                      ? "text-orange-500"
                      : "text-green-500"}
                  >
                    {service.status}
                  </span>
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <Pagination total={40} pageSize={10} currentPage={1} />
    {/if}
  </div>
</div>

<style>
  .dialog {
    font-size: 12px;
  }
  .thead {
    background: linear-gradient(180deg, #112444 0%, rgba(0, 11, 32, 0.6) 100%);
  }
  .table-tr {
    /* 先定义虚线，再定义背景色 */
    background-image: linear-gradient(to right, #263452 8px, transparent 8px),
      linear-gradient(to bottom, rgba(9, 20, 47, 0.6), rgba(9, 20, 47, 0.6));
    background-size:
      24px 1px,
      /* 虚线的尺寸 */ 100% 100%; /* 背景色铺满 */
    background-repeat: repeat-x, no-repeat;
    background-position:
      0 bottom,
      0 0;
    padding-bottom: 1px;
  }
  .table-tr:hover {
    background-color: rgba(9, 20, 47, 0.6);
  }
</style>
